<template>
  <div>
    <el-row :gutter="50">
      <el-col :span="6" v-for="(item, index) in cates" :key="item.Id"
        ><div class="grid-content bg-purple">
          <el-card class="custom-card" shadow="hover">
            <!-- Card 内容 -->
            <div class="card-header">商品品类: {{ item.alias }}</div>
            <div class="card-content">{{ item.name }}</div>
            <div class="card-footer">
              <el-button type="danger" @click="showDeleteDialog(item.Id)"
                >删除</el-button
              >
              <el-button type="primary" @click="openDialog(item)"
                >修改</el-button
              >
              <el-button type="success" @click="openDrawer(item.alias)"
                >详情</el-button
              >
              <el-drawer title="商品" size="70%" :visible.sync="drawer">
                <only-table :dataObject="isData"></only-table>
              </el-drawer>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="确认删除"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <span>确定要删除吗？</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="isDialogOpen" width="30%" center>
      <common-form
        :formLabel="operTateFormLabel"
        :inline="true"
        :form="operateForm"
        ref="form"
      ></common-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getCates,
  deleteCate,
  updatecate,
  getallproducts,
} from "../../api/data";
import onlyTable from "../../components/onlyTable.vue";
import CommonForm from "../../components/CommonForm";
export default {
  name: "Mall",
  components: {
    onlyTable,
    CommonForm,
  },
  data() {
    return {
      drawer: false,
      cates: [],
      dialogVisible: false,
      currentItem: null,
      isDialogOpen: false,
      processedData: [],
      isData: [],
      operTateFormLabel: [
        {
          model: "name",
          label: "用户名",
          type: "input",
        },
        {
          model: "id",
          label: "ID",
          type: "input",
        },
        {
          model: "alias",
          label: "品类",
          type: "input",
        },
      ],
      operateForm: {
        name: "",
        alias: "",
        id: "",
      },
    };
  },
  methods: {
    openDialog01(index) {
      this.$set(this.dialogVisible, index, true); // 使用 Vue.set 来确保视图更新
    },
    showDeleteDialog(item) {
      this.currentItem = item;
      this.dialogVisible = true;
    },
    openDialog(item) {
      this.isDialogOpen = true;
      this.operateForm.name = item.name;
      this.operateForm.alias = item.alias;
      this.operateForm.id = item.Id;
    },
    handleConfirm() {
      let Authorization = this.$store.state.user.token;
      let formData = {
        Id: this.operateForm.id,
        name: this.operateForm.name,
        alias: this.operateForm.alias,
      };
      let params = [formData, Authorization];
      updatecate(params).then(({ data: res }) => {
        if (res.status == 0) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.isDialogOpen = false;
          this.getList();
        } else {
          this.$message({
            message: "修改失败",
            type: "warning",
          });
        }
      });
    },
    openDrawer(alias) {
      this.drawer = true;
      let numberAlias = Number(alias);
      let newArray = this.processedData.filter(
        (item) => item.cate_id === numberAlias
      );
      this.isData = newArray;
    },
    confirmDelete() {
      let Authorization = this.$store.state.user.token;
      let id = this.currentItem;
      let params = [id, Authorization];
      deleteCate(params).then(({ data: res }) => {
        if (res.status == 0) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
        } else {
          this.$message({
            message: "删除失败",
            type: "warning",
          });
        }
      });
      this.dialogVisible = false;
    },
    getList() {
      getCates(this.$store.state.user.token).then(({ data: res }) => {
        if (res.status == 0) {
          this.cates = res.data;
          console.log(this.cates);
        } else {
          this.$message({
            message: "获取失败",
            type: "warning",
          });
        }
      });
    },
    getGooslist() {
      getallproducts().then((res) => {
        if (res.status === 200) {
          let stringToDelete = "uploads/";
          let baseUrl = "http://127.0.0.1:3002/";
          let newArr = res.data.map((item) => {
            return {
              ...item,
              image: baseUrl + item.img.replace(stringToDelete, ""), // 处理图片路径
            }; // 提取name属性并转换为大写形式
          });
          this.processedData = newArr;
          console.log(newArr);
        }
      });
    },
  },
  computed: {
    ...mapState({
      userToken: (state) => state.user.token,
    }),
  },
  created() {
    this.getList();
    this.getGooslist();
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  margin-bottom: 20px;
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 240px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
.custom-card {
  width: 300px;
  height: 240px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 10px;
  font-weight: bold;
}

.card-content {
  padding: 20px;
  margin-bottom: 40px;
}

.card-footer {
  text-align: right;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>